<template>
  <li :style="{background: state.bgColor}" @mouseenter="handleEnter(true)" @mouseleave="handleEnter(false)">
    <label>
      <input type="checkbox" v-model="isComplete"/>
      <span>{{todo.title}}</span>
    </label>
    <button class="btn btn-danger" v-show="state.isShow" @click="deleteItem">删除</button>
  </li>
</template>
<script lang="ts" setup>
import { computed } from '@vue/reactivity';
import { reactive } from 'vue';
import type { Todo } from '../types';


interface Props {
  todo: Todo; 
  deleteTodo(id: number): void; 
  toggleTodo(todo: Todo, isCheck: boolean): void
}
const props = defineProps<Props>()

const state = reactive({
  bgColor: 'white',
  isShow: false
})

const isComplete = computed<boolean>({
  get () {
    return props.todo.completed
  },
  set (value: boolean) {
    props.toggleTodo(props.todo, value)
  }
})

const handleEnter = (isEnter: boolean) => {
  if (isEnter) {
    state.bgColor = '#aaaaaa',
    state.isShow = true
  } else {
    state.bgColor = '#ffffff',
    state.isShow = false
  }
}

const deleteItem = () => {
  if (window.confirm('确定删除吗?')) {
    props.deleteTodo(props.todo.id)
  }
}
</script>

<style scoped>
  li {
    list-style: none;
    height: 36px;
    line-height: 36px;
    padding: 0 5px;
    border-bottom: 1px solid #ddd;
  }

  li label {
    float: left;
    cursor: pointer;
  }

  li label li input {
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    top: -1px;
  }

  li button {
    float: right;
    margin-top: 3px;
  }

  li:before {
    content: initial;
  }

  li:last-child {
    border-bottom: none;
  }
</style>
